import { FC } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { LOGIN_PATHNAME } from '../../router/index';
import { UserOutlined } from '@ant-design/icons';

import { Button, message } from 'antd';
import { removeUserToken } from '../../utils/user-token';
import useGetUserInfo from '../../hooks/useGetUserInfo';
import { useDispatch } from 'react-redux';
import { logoutReducer } from '../../store/userReducer';
const UserInfo: FC = () => {
  const nav = useNavigate();
  const dispatch = useDispatch();
  const { username, nickname } = useGetUserInfo();
  function logout() {
    dispatch(logoutReducer());
    removeUserToken();
    nav(LOGIN_PATHNAME);
    message.success('退出成功');
  }
  const Login = (
    <Link to={LOGIN_PATHNAME} onClick={() => nav(LOGIN_PATHNAME)}>
      登录
    </Link>
  );
  const UserInfo = (
    <>
      <span style={{ color: '#e8e8e8' }}>
        <UserOutlined />
        {nickname}
      </span>
      <Button type="link" onClick={() => logout()}>
        退出
      </Button>
    </>
  );
  return <>{username ? UserInfo : Login}</>;
};

export default UserInfo;
